var app = new Vue({
    el: '#app',
    data: {
        // users: ['qzone1545687760', 'mrannie', 'yosclub', 'huhu-421', 'beingj'],
        user: 'beingj',
        // user: 'qilin66',
        // proxy: 'http://127.0.0.1:8080/',
        proxy: 'https://cors-anywhere.herokuapp.com/',
        imgs: [],
        album_list: [],
        album: null
    },
    methods: {
        clear_album_list: function () {
            while (this.album_list.length > 0) {
                this.album_list.pop();
            }
            this.album = null;
        },
        add_album_list: function (album_list) {
            album_list.forEach(i => this.album_list.push(i));
            this.album = album_list[0].href;
        },
        clear_imgs: function () {
            while (this.imgs.length > 0) {
                this.imgs.pop();
            }
        },
        add_imgs: function (imgs) {
            imgs.forEach(i => this.imgs.push(i));
        },
        fetch_album: function () {
            get_album(this.proxy, this.album);
        },
        fetch_album_list: function () {
            get_album_list(this.proxy, this.user);
        }
    },
});

function get_via_proxy(proxy, url, callback) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            callback(this);
        }
    };
    xhttp.open("GET", proxy + '' + url, true);
    xhttp.setRequestHeader('x-requested-with', true);
    xhttp.send();
}

function get_album_list(proxy, user) {
    var url = 'http://www.yupoo.com/photos/' + user + '/albums/';
    app.clear_album_list();
    get_via_proxy(proxy, url, (x) => {
        const ele = document.createElement('div');
        ele.innerHTML = x.responseText;
        app.add_album_list(find_albums_from(ele));
        app.fetch_album();
        const end = ele.getElementsByClassName('end');
        if (end.length > 0) {
            const total = parseInt(end[0].innerText);
            for (let i = 2; i <= total; i++) {
                const u = url + 'page' + i;
                get_via_proxy(proxy, u, (y) => {
                    const e = document.createElement('div');
                    e.innerHTML = y.responseText;
                    app.add_album_list(find_albums_from(e));
                });
            }
        }
    });
}

function get_album(proxy, url) {
    app.clear_imgs();
    // var url = "http://www.yupoo.com/photos/huhu-421/albums/7226414/?style=detail";
    var q = 'style=detail';
    get_via_proxy(proxy, url + '?' + q, (x) => {
        const ele = document.createElement('div');
        e = ele;
        ele.innerHTML = x.responseText;
        app.add_imgs(find_imgs_from(ele));
        const end = e.getElementsByClassName('end');
        if (end.length > 0) {
            const total = parseInt(end[0].innerText);
            for (let i = 2; i <= total; i++) {
                // http://www.yupoo.com/photos/huhu-421/albums/703792/page2/?style=detail
                const u = url.substring(0, url.lastIndexOf('/')) + '/page' + i + '/?' + q;
                get_via_proxy(proxy, u, (y) => {
                    const e = document.createElement('div');
                    e.innerHTML = y.responseText;
                    app.add_imgs(find_imgs_from(e));
                });
            }
        }
    });

}

function find_imgs_from(ele) {
    const imgs = Array.from(ele.getElementsByTagName('img')).filter(n => n.className.toLowerCase() == 'photo' && n.id != 'photo_img');
    imgs.forEach(n => {
        n.src = n.src.replace('http://photo.', 'http://pic.').replace('/small.jpg', '/medish.jpg');
        let p = n.parentElement.parentElement;
        n.t = p.children[0].innerText;
        n.d = p.children[2].innerText;
    });
    return imgs;
}

function find_albums_from(ele) {
    const album_list = Array.from(ele.getElementsByClassName('seta'));
    album_list.forEach(n => {
        n.n = n.parentElement.parentElement.children[1].children[0].innerText;
    });
    return album_list;
}

app.fetch_album_list();